<template>
  <view class="mine-view">
    <view class="title-view">
      <view class="title-head">风险承受能力评估问卷</view>
      <view class="title-text"
        >尊敬的投资者：本问卷旨在协助投资这了解自身对投资风险的承受能力，为保护您的合法权益，请真实、准确、完整地填写本问卷，如因存在欺诈、隐藏或其他不实陈述而导致评估结果与实际情况不符的，【大连诺众投资咨询有限公司】（以下简称“诺众”）不承担任何责任。投资者应购买与其风险偏好相适应的金融产品，若所选择产品的风险等级高于其风险承受能力，经提示后仍选择投资的，视为投资者已充分了解该投资风险并愿意承担相应的风险。（除特殊说明以下均为单选）</view
      >
    </view>
    <view class="title-one">一、财务状况</view>
    <view class="select-view">
      <view>1、您的主要收入来源是</view>
      <view class="radio-view">
        <checkbox-group class="uni-list" @change="checkboxChange">
          <label
            class="uni-list-cell"
            v-for="item in checkboxItems"
            :key="item.name"
          >
            <view>
              <checkbox
                :value="item.name"
                :checked="item.checked"
                color="#ffffff"
                style="transform: scale(0.7)"
              ></checkbox>
            </view>
            <view>{{ item.value }}</view>
          </label>
        </checkbox-group>
      </view>
      <view style="font-weight: 600;margin-top: 8px;">（本题可多选，我是备注文字）</view>
    </view>
    <view class="select-view" style="margin-top: 20px">
      <view>2、您的家庭可支配年收入为（折合人民币）？</view>
      <view class="radio-view">
        <radio-group class="uni-list" @change="radioChange($event)">
          <label
            class="uni-list-cell"
            v-for="item in radioItems"
            :key="item.name"
          >
            <view>
              <radio
                :value="item.name"
                :checked="item.checked"
                color="#FF453B"
                style="transform: scale(0.7)"
              ></radio>
            </view>
            <view>
              <label class="label-2-text" :for="item.name">
                <text>{{ item.value }}</text>
              </label>
            </view>
          </label>
        </radio-group>
      </view>
    </view>
    <view class="select-view" style="margin-top: 20px">
      <view>3、在您每年的家庭可支配收入中，可用于金融投资（储蓄存款除外）的比例为？</view>
      <view class="radio-view">
        <radio-group class="uni-list" @change="radioChange($event)">
          <label
            class="uni-list-cell"
            v-for="item in radioItems"
            :key="item.name"
          >
            <view>
              <radio
                :value="item.name"
                :checked="item.checked"
                color="#FF453B"
                style="transform: scale(0.7)"
              ></radio>
            </view>
            <view>
              <label class="label-2-text" :for="item.name">
                <text>{{ item.value }}</text>
              </label>
            </view>
          </label>
        </radio-group>
      </view>
    </view>
    <el-button class="button-view" type="primary">提交</el-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      radioItems: [
        {
          id:"1",
          name: "A",
          value: "A. 工资、劳务报酬",
        },
        {
          id:"2",
          name: "B",
          value: "B. 工资、劳务报酬",
          checked: "true",
        },
        {
          id:"3",
          name: "C",
          value: "C. 工资、劳务报酬",
        },
        {
          id:"4",
          name: "D",
          value: "D. 出租、出售房地产等非金融性资产收入",
        },
        {
          id:"5",
          name: "E",
          value: "E. 工资、劳务报酬",
        },
      ],
      checkboxItems: [
        {
          name: "A",
          value: "A. 工资、劳务报酬",
        },
        {
          name: "B",
          value: "B. 工资、劳务报酬",
        },
        {
          name: "C",
          value: "C. 工资、劳务报酬",
        },
        {
          name: "D",
          value: "D. 出租、出售房地产等非金融性资产收入",
        },
        {
          name: "E",
          value: "E. 工资、劳务报酬",
        },
      ],
    };
  },
  methods: {
    radioChange: function (e) {
      console.log("radioChange", e);
      var checked = e.target.value;
      var changed = {};
      for (var i = 0; i < this.radioItems.length; i++) {
        if (checked.indexOf(this.radioItems[i].name) !== -1) {
          changed["radioItems[" + i + "].checked"] = true;
        } else {
          changed["radioItems[" + i + "].checked"] = false;
        }
      }
    },
    checkboxChange: function (e) {
      console.log("checkboxChange", e);
      var checked = e.target.value;
      var changed = {};
      for (var i = 0; i < this.checkboxItems.length; i++) {
        if (checked.indexOf(this.checkboxItems[i].name) !== -1) {
          changed["checkboxItems[" + i + "].checked"] = true;
        } else {
          changed["checkboxItems[" + i + "].checked"] = false;
        }
      }
    },
  },
};
</script>

<style scoped lang="scss">
.mine-view {
  width: 100%;
  background: white;
  padding: 50px 40px 30px 40px;
  min-height: 610px;
  .title-view {
    width: 100%;
    padding: 20px;
    background: #fffbf3;
    .title-head {
      font-weight: 600;
      font-size: 20px;
      color: #2c1101;
    }
    .title-text {
      margin-top: 14px;
      font-weight: 400;
      font-size: 16px;
      color: #2c1101;
      line-height: 27px;
    }
  }
  .title-one {
    margin-top: 25px;
    color: #2c1101;
    font-size: 16px;
    font-weight: 600;
  }
  .select-view {
    margin-top: 8px;
    font-weight: 400;
    font-size: 16px;
    // color: #2c1101;
    .radio-view {
      .uni-list {
        .uni-list-cell {
          margin-top: 8px;
          display: flex;
        }
      }
    }
  }

  .button-view{
    background: #FF453B;
    border-color: #FF453B;
    height: 54px;
    width: 179px;
    margin-top: 42px;
  }
}
</style>